<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- width 布局视口宽度 -->
    <!-- <meta name="viewport" content="width=400"> -->
    <!-- device-width  设备独立像素宽度 -->
    <!-- <meta name="viewport" content="width=device-width"> -->

    <!-- initial-scale  初始化比例 -->
    <!-- <meta name="viewport" content="initial-scale=0.5"> -->
    <!-- <meta name="viewport" content="initial-scale=1"> -->

    <!-- minimum-scale 最小比例   -->
    <!-- <meta name="viewport" content="minimum-scale=1">  -->
    <!-- <meta name="viewport" content="maximum-scale=1">  -->
    <!-- <meta name="viewport" content="maximum-scale=1, minimum-scale=1">  -->
    <meta name="viewport" content="user-scalable=no"> 


    <title>viewport 控制</title>
</head>
<body>
    <div id="box">

    </div>

    <script>
        //获取元素
        let box = document.querySelector('#box');

        setInterval(() => {
            box.innerHTML = '布局视口的大小为: '
                        +document.documentElement.clientWidth 
                        + '<br>视觉视口的大小为:'
                        + window.visualViewport.width
        }, 100);

        //获取布局视口大小
        console.log(document.documentElement.clientWidth);
    </script>
</body>
</html>